<template>
  <div>

    <!--名片-->
    <div class="bgfff pt15 pl15 pb15 disflex jsbet mb10">
      <div class="disflex">
        <img :src="logo"  mode="aspectFill" alt="" class="w60 h60 bradius50p mr10">
        <div>
          <p class="c38 fs18 fbold pt10 pb12">{{username}}</p>
          <p class="ca8 fs12" v-if="hasCard" @click="toEditMyCard">查看编辑个人名片</p>
        </div>
      </div>
      <GetPhoneNumber @next="toCardCase">
        <div class="pt15">
          <div class="disflex h30 bra_left_15 bg_line_blue cfff fs12 pl15 pr10 lh30 align-cen">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/cardlist.png" alt="" class="w24 h24">
            <span class="pl7">名片夹</span>
          </div>
        </div>
      </GetPhoneNumber>
    </div>


    <!--订单-->
    <div class="bgfff fs12 c78">
      <div class="lh18 pl15 pr15 pt14 disflex jsbet" @click="page_tap('orderLists',1)">
        <span class="fs16 c38 fbold">我的订单</span>
        <div>
          <span class="ca8 pr11">查看全部订单</span>
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/right.png" alt="" class="w10 h10">
        </div>
      </div>

      <div class="disflex pl20 pr20 mb10 fs12 c78 pt10 pb15 textc bgfff link-list">

        <div class="textc" @click="page_tap('orderLists',1)">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/pay.png" alt="" class="w30 h30">
          <p class="pt5">待付款</p>
          <div class="count" v-if="waitPayOrderNum > 0">{{waitPayOrderNum}}</div>
        </div>
        <div @click="page_tap('orderLists',2)">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/daifahuo.png" alt="" class="w30 h30">
          <p class="pt5">待发货</p>
          <div class="count" v-if="waitSendOrderNum > 0">{{waitSendOrderNum}}</div>
        </div>
        <div @click="page_tap('orderLists',3)">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/daishouhuo.png" alt="" class="w30 h30">
          <p class="pt5">待收货</p>
          <div class="count" v-if="waitGetPayOrderNum > 0">{{waitGetPayOrderNum}}</div>
        </div>
        <div @click="page_tap('orderLists',4)">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/payed.png" alt="" class="w30 h30">
          <p class="pt5">已完成</p>
        </div>
        <div @click="page_tap('orderLists',6)">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/refund.png" alt="" class="w30 h30">
          <p class="pt5">退款/售后</p>
        </div>
      </div>

    </div>


    <div class="bgfff fs12 c78">
      <div class="lh18 pl15 pr15 pt14 disflex jsbet">
        <span class="fs16 c38 fbold">我的服务</span>
      </div>

      <div class="disflex pl20 pr20 mb10 fs12 c78 pt10 pb10 bgfff textc link-list">

        <div class="textc" @click="page_tap('shopCart')">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/cart.png" alt="" class="w30 h30">
          <p class="pt5">购物车</p>
        </div>
        <div @click="page_tap('msg')">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/msg_blue.png" alt="" class="w30 h30">
          <p class="pt5">我的消息</p>
        </div>
        <div @click="page_tap('collect')">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/star.png" alt="" class="w30 h30">
          <p class="pt5">我的收藏</p>
        </div>
        <div @click="page_tap('address')">
          <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/addr.png" alt="" class="w30 h30">
          <p class="pt5">我的地址</p>
        </div>
      </div>
    </div>

    <div class="toCRMBtn textc" @click="toCrmAPP">
      前往壹脉CRM
    </div>

  </div>
</template>

<script>
  import GetPhoneNumber from '@/components/getPhoneNumber' //
  import WXAJAX from '../../utils/request'
  import {toMiniProgram} from '@/utils';

  export default {
    name: '',
    components: {GetPhoneNumber},
    data() {
      return{
        username:'' ,
        logo:'',
        waitPayOrderNum: 0,
        waitSendOrderNum: 0,
        waitGetPayOrderNum: 0,
        hasCard: wx.getStorageSync('hasCard'),
      }
    },
    onShow() {
      this.getOrderListCount();
    },
    mounted() {
      this.username = wx.getStorageSync('USERNAME') || '' ;
      this.logo = wx.getStorageSync('avatarUrl') || '' ;
      // if(!this.username){
      //   wx.showToast({
      //     title: '请登录',
      //     duration: 2000,
      //     icon: 'none'
      //   });
      //   setTimeout(function () {
      //     var url = '../cardCase/main';
      //     wx.redirectTo({url: url});
      //   },1000)
      // }
      wx.setNavigationBarTitle({
        title: '个人中心'
      });
    },
    methods: {
      getOrderListCount: function () {
        // var v = this;
        WXAJAX.POST({}, '', '/orders/getOrderListCount')
          .then((data) => {
            if (data) {
              // 数组过滤处理得到目标值
              this.waitPayOrderNum = data.filter(item => {return item.orderState === 1}).length > 0 ? data.filter(item => {return item.orderState === 1})[0].num : 0 // 订单状态（1待付款，2待发货，3待收货，4已完成，5交易取消，6退款成功，0已过期）
              this.waitSendOrderNum = data.filter(item => {return item.orderState === 2}).length > 0 ? data.filter(item => {return item.orderState === 2})[0].num : 0
              this.waitGetPayOrderNum = data.filter(item => {return item.orderState === 3}).length > 0 ? data.filter(item => {return item.orderState === 3})[0].num : 0
            }
          })
          .catch((err) => {
            console.log(err)
            wx.showToast({
              title: JSON.stringify(err),
              icon: 'none',
              duration: 2000
            });
          })
      },
      page_tap(url,status){
        if(status){
          wx.navigateTo({url:'../'+url+'/main?status='+status})
        }else{
          wx.navigateTo({url:'../'+url+'/main'})
        }
      },
      toCrmAPP(){
        toMiniProgram(`/pages/index/main`);
      },
      toCardCase(){//名片夹
        wx.redirectTo({url:'../cardCase/main'})
      },
      toEditMyCard(){//编辑自己的名片
        if (!wx.getStorageSync('hasCard')) {
          wx.showToast({
            title: '您还没有创建名片，请点击右上角名片夹创建！',
            duration: 2000,
            icon: 'none'
          })
          return;
        }
        wx.navigateTo({url:'../editCard/main?type=edit'})
      }
    }
  }
</script>

<style>
  .link-list > div{
    width: 20%;
    position: relative;
  }
  .link-list > div > .count{
    position: absolute;
    top: -5px;
    right: 12px;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: #fff;
    background: #fd634e;
    border-radius: 50%;
  }
  .toCRMBtn{
    margin: 50px 43px 0;
    height: 44px;
    line-height: 44px;
    background:linear-gradient(90deg,rgba(118,218,217,1),rgba(81,205,204,1));
    border-radius:5px;
    color: white;
    font-size: 18px;
    font-weight: 400;
  }
  .toCRMBtn{
    margin: 50px 43px 0;
    height: 44px;
    line-height: 44px;
    background:linear-gradient(90deg,rgba(118,218,217,1),rgba(81,205,204,1));
    border-radius:5px;
    color: white;
    font-size: 18px;
    font-weight: 400;
  }
</style>
